<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        width: 300px;
        height: 800px;
        border: 3px solid red;
        display: flex;
        /*flex-wrap: wrap;*/
        /* wrap 和 direction 简写属性*/
        /*flex-flow: row wrap;*/
        flex-flow: row wrap;
        /*justify-content: space-evenly;*/
        /*
        align-items 设置元素在辅轴上如何分布
            stretch 默认值，元素在辅轴上占满剩余空间
            flex-start 元素在辅轴上与边框对齐
            flex-end 元素在辅轴上与终边对齐
            center 元素在辅轴上与中心对齐
            baseline 元素在辅轴上与基线对齐
        */
        align-items: flex-start;
        /*
        align-content 辅轴空白空间的分布

        */
        align-content: center;
    }
    li {
        width: 100px;
        background-color: #bfa;
        flex-shrink: 0;
    }
    li:nth-child(2){
        background-color: pink;
    }
    li:nth-child(3){
        background-color: saddlebrown;
    }
    li:nth-child(4){
        background-color: #50f;
    }
    li:nth-child(5){
        background-color: #fcfc4c;
    }
</style>
<body>
<ul>
    <li>1</li>
    <li>2
        <div>
            2-1
        </div>
    </li>
    <li>3
        <div>
            3-1
        </div>
        <div>
            3-2
        </div>
    </li>
    <li>1</li>
    <li>2
        <div>
            2-1
        </div>
    </li>
</ul>
</body>
</html>
